<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加视频</title>
    <%@include file="/WEB-INF/layouts/edit-header.jsp"%>
    <style type="text/css">

        .upload-tips {
            font-weight: 400;
            font-style: normal;
            padding-bottom: 6px;
            color: #8d8d8d;
        }

        .video-thumb {
            width: 320px;
            height: 180px;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
            display: block;
            position: relative;
            background-color: #e7e7eb;
        }

    </style>
</head>
<body>

<div class="create-page tpanel">
    <div class="panel-content">
        <div class="container-fluid">

            <form id="createForm" class="form-horizontal" action="/admin/wechat/video/save"
                  onkeydown="if (event.keyCode == 13) return false;">
                <input name="id" value="${entity.id}" required style="display: none;">
                <div class="form-group form-group-first">
                    <label for="uploadTips" class="sr-only col-sm-2 control-label">提示信息</label>
                    <div class="col-sm-8">
                        <div id="uploadTips" class="upload-tips">
                            当前内容修改后会再次审核，对外展示将保持最近一次审核通过的视频信息
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="videoTitle" class="col-sm-2 control-label">标题</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"
                               id="videoTitle" name="title"
                               value="${entity.title}"
                               placeholder="请输入标题(必填)" required
                               minlength="0" maxlength="21"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <label for="cover" class="col-sm-2 control-label">封面</label>
                    <div class="col-sm-8">
                        <div id="cover" style="vertical-align: middle; padding-top: 5px;">
                            <a class="btn btn-default" onclick="openCoverWindow('#coverModal')">设置封面</a>
                            <div style="padding-top: 5px;">
                                <div id="coverThumb" class="video-thumb" style='background-image: url("${entity.coverUrl}");'></div>
                                <input type="text" name="coverUrl" value="${entity.coverUrl}"
                                       required style="width: 100%; height: 0; opacity: 0; left: 0; right: 0;">
                            </div>
                            <div class="modal fade" id="coverModal" tabindex="-1" role="dialog" aria-labelledby="coverModalLabel">
                                <div class="modal-dialog row">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="coverModalLabel">
                                                修改封面
                                            </h4>
                                        </div>
                                        <div class="modal-body row">
                                            <div class="col-sm-12">
                                                <div style="margin: 15px;">
                                                    <video id="video" controls="controls" style="background-color:black; width: 100%; height: 300px;">
                                                        <source src="${entity.url}">
                                                    </video>
                                                </div>
                                                <div id="output" style="margin: 15px;">
                                                    <label style="margin-top: 10px;">播放视频，点击或暂停视频设置缩略图</label>
                                                    <br>
                                                    <img id="img" src="${entity.coverUrl}" width="320px" height="180px" style="background-color: #f4f5f9; border: none;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer" style="clear: both; vertical-align: middle; text-align: center;">
                                            <button type="button" class="btn btn-primary" onclick="setCover()">
                                                提交更改
                                            </button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content" class="col-sm-2 control-label">简介</label>
                    <div class="col-sm-8">
                        <textarea id="content" rows="5" class="form-control" maxlength="120"
                            name="introduce" required>${entity.introduce}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12" style="text-align: center;">
                        <a class="btn btn-default" href="javascript:window.history.back();">返回</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" class="btn btn-primary" value="保存" />
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle('编辑视频');

    $(function() {
    });

    (function() {
        var video, output;
        function initialize() {
            output = $("#output");
            video = $("#video");
            video.bind('pause', captureImage);
        };

        function captureImage() {
            var canvas = document.createElement("canvas");
            canvas.width = 320;
            canvas.height = 180;
            canvas.getContext('2d').drawImage(video[0], 0, 0, canvas.width, canvas.height);

            var img = document.getElementById("img");
            img.src = canvas.toDataURL("image/png");
            output.append(img);
        };

        initialize();
    })();

    function openCoverWindow(wid) {
        $(wid + "").modal({
            backdrop: false,
            keyboard: false
        });
    }

    function setCover() {
        var img = $("#img");
        if (img.attr('src') == "") {
            topLayer.msg("您还没有选择封面", {icon: 1});
            return;
        }

        $.post(
            '${ctx}/admin/wechat/video/set-cover',
            {id: ${entity.id}, data: img.attr('src')},
            function (result) {
                if (result && result.code == 'OK') {
                    $("#coverThumb").css('background-image', 'url(' + result.message + ')');
                    $("input[name='coverUrl']").val(result.message);
                    $("#coverModal").modal('hide');
                    topLayer.msg("设置封面成功", {icon: 1});
                }
        }, 'json');
    }

</script>
</body>
</html>
